<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false"
        offset="50">
        <div>
          <ArticleItem v-for="obj in list" :key="obj.art_id" :artObj="obj" @disLikeEV="disLikeFn" @reportEV="reportFn"
            @click.native="itemClickFn(obj.art_id)">
          </ArticleItem>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 问题1：网页刚打开，created里请求和onLoad里请求同时发送，请求的都是最新的数据
// onLoad中，2次一样的数据合并，数据重复，key重复了
// 原因：van-list组件，组件挂载时，默认就会判定一次是否触底
// 第一页数据也是网页请求回来的，标签先挂载了，数据回来更新Dom，所以标签没有高度，list的load事件上来就触发了
// 解决方案1：list组件添加:immediate-check="false" 让他 上来初始化时不要判定
// 解决方案2：在onLoad的第一行写一个数组长度的判断
import { getAllArticlesListAPI, getDislikeAriticlesAPI, getReportArticleAPI } from '@/api'
import ArticleItem from '../../../components/ArticleItem.vue' // 这个就不用@了 因为这两个是邻居，都在components里
import Notify from '@/ui/Notify.js'
export default {
  props: {
    // list: Array // 文章新闻列表数组
    channelId: Number // 频道ID
  },
  components: {
    ArticleItem
  },
  data() {
    return {
      list: [], // 文章新闻列表数组
      loading: false, // 底部加载状态
      finished: false, // 底部是否完成状态
      theTime: new Date().getTime(), // 用于分页
      isLoading: false // 顶部的加载状态
    }
  },
  created() {
    this.getAllArticlesListFn()
  },
  methods: {
    async getAllArticlesListFn() {
      // 专门负责发送请求的
      const res = await getAllArticlesListAPI({
        channel_id: this.channelId, // 先默认请求推荐频道的数据
        timestamp: this.theTime // 时间戳
      })
      // pre_timestamp
      // 下一段开头的那篇文章的时间戳
      // 第一次系统时间(timestamp)->后台返回0-9条数据->携带第10条pre_timestamp值返回
      // 第二次加载的时候(timestamp)->上次(timestamp)(代表告诉后台，从指定的时间戳再往后找10个)10-19条，20条pre_timestamp返回

      // created()上来第一次List是空数组，合并空数组没问题
      // onLoad()触底加载更多，2个数组合并更没问题
      //
      this.list = [...this.list, ...res.data.data.results]
      this.theTime = res.data.data.pre_timestamp

      // created()上来走一次，Loading没触底本身就是false，但是给了false也没问题
      // 为了一会onLoad()调用时，才有用
      this.loading = false // 如果不关闭，底部一直是加载中的状态，下次触底不会触发onload
      if (res.data.data.pre_timestamp === null) {
        // 本次回来的数据是最后一个，没有下一个了
        this.finished = true
      }
      // 顶部加载状态改为false
      this.isLoading = false
    },
    // 底部加载的事件方法
    onLoad() {
      if (this.list.length === 0) return // 如果页面没有数据，就没有高度，就让本次onLoad逻辑代码不往下执行
      this.getAllArticlesListFn()
    },
    // 顶部刷新的事件方法
    onRefresh() {
      // 目标：把list数组清空，来一份新的数据
      this.list = []
      this.theTime = new Date().getTime()
      this.getAllArticlesListFn()
    },
    // 反馈不感兴趣事件方法
    async disLikeFn(id) {
      await getDislikeAriticlesAPI({
        artId: id
      })
      // res没有什么有用的信息，所以await往下放行，就证明我们的请求和响应是成功的，也就是反馈成功
      Notify({ type: 'success', message: '反馈成功！' })
    },
    // 举报文章事件方法
    async reportFn(id, value) {
      await getReportArticleAPI({
        artId: id,
        type: value
      })
      Notify({ type: 'success', message: '反馈成功！' })
    },
    // 文章单元格点击事件
    itemClickFn(id) {
      this.$router.push({
        path: `/detail?art_id=${id}`
      })
    }

  }
}
</script>

<style></style>
